<template>
  <div class="personal">
    <header_slot></header_slot>
    <nav_slot></nav_slot>
    <div class="content">
      <div class="wrap clearfix">
        <div class="left-nav">
          <dl>
            <dt>设置</dt>
            <dd v-for="(item, index) in arr" :key="index">{{ item }}</dd>
          </dl>
        </div>
        <div class="main">
          <div class="mt">
            <ul class="extra-l">
              <li class="fore-1">基本信息</li>
            </ul>
          </div>
          <div class="info"><info></info></div>
        </div>
      </div>
    </div>
    <div class="footer"><footer_slot></footer_slot></div>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import header_slot from "./header-slot";
import nav_slot from "./nav-slot";
import info from "./info";
import footer_slot from "./footer-slot";

export default {
  components: { header_slot, nav_slot, info, footer_slot },
  data() {
    return {
      arr: [
        "个人信息",
        "账户安全",
        "我的尺码",
        "账号绑定",
        "收货地址",
        "健康档案",
        "分享绑定",
        "邮件订阅",
        "应用授权",
        "快捷支付",
        "增票资质",
        "企业发票",
        "采购需求单",
      ],
    };
  },
};
</script>
<style scoped>
.left-nav {
  float: left;
}
.main {
  float: left;
  background-color: #fff;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
}
.mt {
  display: block;
  padding: 10px;
}
.extra-l li {
  float: left;
  padding-left: 20px;
  color: #999;
}
.info {
  padding: 20px 5px 0 15px;
  width: 990px;
}
.main {
  margin-top: 20px;
  margin-left: 20px;
  width: 1100px;
}
dt {
  height: 28px;
  line-height: 28px;
  color: #333;
  font-weight: 700;
}
dd {
  color: #666;
  line-height: 24px;
}
dd:nth-child(2) {
  color: #e4393c;
  font-weight: 700;
  text-decoration: underline;
}
dd:hover {
  cursor: pointer;
  color: #e4393c;
  font-weight: 700;
  text-decoration: underline;
}
.info {
  float: left;
}
.mess {
  float: left;
  margin-left: 60px;
  margin-top: 50px;
}
.main {
  margin-bottom: 20px;
}
</style>;
